

// --- INPUT

function addInputSkin ( s ) /* by skinName ( ex:  <input name="inputSkinName"... => addInputSkin('inputSkinName') ) */
{
	var o = getElementsName( s );
	
	for( i=0 ; i<o.length ; i++ )
	{
		o[ i ].skinName = o[ i ].name ;
		 initInputField( o[ i ] );
	}
}

function addInputSkinByID ( a , skinName ) // by id ( ex:  <input id="inputID-1"... => addInputSkinByID(['inputID-2','inputID-2',...]) ) .... the skinName is the name used in css ( .inputSkin---"SKIN_NAME" )
{
	for( i=0 ; i<a.length ; i++ )
	{
		var o = getElementID( a[i] );
		o.skinName = skinName ;
		initInputField( o );
	}
}
	
function addTextareaSkinByID ( a , skinName ) // by id ( ex:  <textarea id="textarea_1"... => addTextareaSkinByID(['textarea_1',...], "taLARGE") ) .... the skinName is the name used in css ( .inputSkin---"taLARGE" )
{
	for( i=0 ; i<a.length ; i++ )
	{
		var o = getElementID( a[i] );
		 var div = $( o ).closest( 'div' );
		div.skinName = o.skinName = skinName ;
		
		initTextareaField( o , div );
		
		$( o ).focus( function(){  setTextareaFocus( div );  	 });
		$( o ).blur(  function(){  setTextareaBlur( this , div );   });
	}
}


// --- TEXTAREA

function addTextareaSkin ( s )
{
	var o = getElementsName( s );
	
	for( i=0 ; i<o.length ; i++ )
	{
		 var div = $( o[ i ] ).closest( 'div' ); // var div = $( o[ i ] ).parent().children( 'div' );
		 div.skinName = o[ i ].skinName = o[ i ].name ;
		
		initTextareaField( o[ i ] , div );
		
		// Listeners
		$( o[ i ] ).focus( function(){  setTextareaFocus( div );  	 });
		$( o[ i ] ).blur(  function(){  setTextareaBlur( this , div );   });
	}
}



/* _____________________________________ PRIVATE _____________________________________ */


// --------------------------- INPUTS SKIN

function initInputField ( o )
{
	$( o ).removeClass().addClass( "inputSkin---"+ o.skinName );
	setInputBlur( o );
}

function setInputFocus ( o )
{
	var sn = o.skinName ;
	
	$( o ).removeClass( 'inputSkin_noText_BLUR---'+ sn +' inputSkin_addText_BLUR---'+o.skinName ).addClass( 'inputSkin_FOCUS---'+ sn );
	( o.value == o.defaultValue )? o.value = '' : o.select() ; /* clear it OR select it */
}

function setInputBlur ( o )
{
	var sn = o.skinName 	;
	var v  = o.value 		;
	var dv = o.defaultValue ;
	
	if( $.trim( v ) == '' 
		||
		v == dv )
	{
		$( o ).removeClass( 'inputSkin_FOCUS---'+ sn +' inputSkin_addText_BLUR---'+ sn ).addClass( 'inputSkin_noText_BLUR---'+ sn );
		o.value = ( dv )? dv : '' ;
	}
	else
	{
		$( o ).removeClass( 'inputSkin_FOCUS---'+ sn +' inputSkin_noText_BLUR---'+ sn ).addClass( 'inputSkin_addText_BLUR---'+ sn );
	}
}

// Listeners
jQuery( document ).ready( function()
{
	$( 'input[type="text"]' ).focus( function(){  setInputFocus( this );  });
	$( 'input[type="text"]' ).blur(  function(){  setInputBlur( this );   });
});


// --------------------------- TEXTAREAS SKIN

function initTextareaField ( o , div )
{
	$( div ).removeClass().addClass( "textareaSkin---"+ div.skinName );
	setTextareaBlur( o , div );
}
function setTextareaFocus ( div )
{
	var sn = div.skinName ;
	$( div ).removeClass( 'textareaSkin_noText_BLUR---'+ sn +' textareaSkin_addText_BLUR---'+ sn ).addClass( 'textareaSkin_FOCUS---'+ sn );
}

function setTextareaBlur ( o , div )
{
	var sn = div.skinName ;
	$( div ).removeClass( 'textareaSkin_FOCUS---'+ sn +' textareaSkin_addText_BLUR---'+ sn ).addClass( (( $.trim( o.value ) == '' )? 'textareaSkin_noText_BLUR---' : 'textareaSkin_addText_BLUR---' )+ sn );
}



// --------------------------- UTILS

function getElementsName ( name ){  return document.getElementsByName( name );  }
function getElementID    (  id  ){  return document.getElementById( id );  		}





